<template>
  <div class="guide">
        <div class="lunbo">
            <!-- vant组件库里的轮播 -->
            <van-swipe :autoplay="1500" >
                <van-swipe-item v-for="(item, index) in images" :key="index">
                    <img :src="item" />
                    <van-button type="info" v-if="index==images.length-1" @click="gotoHome">信息按钮</van-button>
                </van-swipe-item>
            </van-swipe>

        </div>
           <span class="box_1"  @click="gotoHome">
            <van-circle v-model="currentRate" :rate="100" :speed="10" :text="text" size="150px" stroke-width="75"/>
    </span>
        
  </div>
</template>

<script>

export default {
data() {
    return {
      images: [
       require("@/assets/image/img_1.jpg"),
       require("@/assets/image/img_2.jpg"),
       require("@/assets/image/img_3.jpg"),
       require("@/assets/image/img_4.jpg"),
      ],
        currentRate:0,
        count:10
    };
  },created() {
      if(localStorage.getItem("appcount")){
            localStorage.appcount++;
            if(localStorage.appcount>10){
                // this.gotoWhere({name:"home"})
            }
      }else{
          //第一次访问
          localStorage.setItem("appcount",1)
      }
  },
  computed: {
    text() {
       return (10-Math.floor(this.currentRate/10)) + " S"
    },
  },
  watch:{
      currentRate(v){
        if(v==100){
            this.gotoHome()
        }
      }
  },
  
  methods: {
        gotoHome(){
        this.$router.push({
            name:'home'
        })
    }
    ,
  },
}
</script>

<style>
.guide{
    height: 100%;
    width: 100%;
}
.lunbo{
    width: 100%;
    height:100%;
    box-sizing: border-box;
}
.lunbo img{
    width: 100%;
    height: 100%;
}
.van-swipe{
    height: 100%;
    width: 100%;
}
.van-swipe__indicators{
    bottom: 30px;
}
.van-swipe__indicator{
    height: 20px;
    width: 20px;
}
.lunbo button{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 55px;
    box-shadow: 0px 0px 10px #666;
}
.box_1{
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index:2;

}
</style>